<template>
    <template v-if="show">
        <div :class="$style.chart" v-for="(item, index) in powerDatas" :key="index">
            <div>{{ item.name }}</div>
            <Chart :times="powerTimes" :data="item" />
        </div>
    </template>
    
</template>

<script lang="ts" setup>
    import { paramsApi} from '@/api/ChargeOrder'
    
    import { ref } from 'vue';


    import Chart from './Chart.vue'
    import { parseTime } from '@/utils';

    

    const props = defineProps<{
        id : number
    }>()

    const powerTimes = ref<string[]>([])
    const powerDatas = ref<any[]>([
        {
            name : '电流/A',
            data : []
        },

        {
            name : '电压/V',
            data : []
        },

        {
            name : '功率/W',
            data : []
        }
    ])

    const show = ref(false)
    const pageSize = 60

    async function getPowerData(pageNo:number) {
        const res = await paramsApi({id : props.id, pageNo, pageSize})
        if(res.data) {
            res.data.forEach(item => {
                powerTimes.value.push(parseTime(item.t, '{h}:{i}') as string)
                powerDatas.value[0].data.push(Number(item.c))
                powerDatas.value[1].data.push(Number(item.v))
                powerDatas.value[2].data.push(Number(item.p))
            })
        }

        if(!res.data || (res.data.length < pageSize)) { //请求完了
            show.value = true
        }else {
            getPowerData(pageNo + 1)
        }
    }

    getPowerData(1)
</script>

<style lang="scss" module>
    .chart{
        margin-top: 20px;
        &:first-of-type{
            margin-top: 0;
        }
    }
</style>